<template>
	<view class="kind">
		<!-- <u-status-bar></u-status-bar>
		<view class="search">
			<u-search placeholder="请输入关键字搜索" v-model='keyword' bgColor='#ffffff' :clearabled='true' :showAction='false'></u-search>
		</view>	 -->
		<view class="kindList dFlex jBetween_aStart">
			<view class="screen">
				<view :class="['kindOne',actKind.id == item.id ? 'active' : '']" v-for="(item,index) in kindList" :key='item.id' @click="changeScreen(item)">{{item.name}}</view>
			</view>
			<view class="list">
				<view class="advImg imgPublic">
					<image :src="actKind.image" mode="widthFix"></image>
				</view>
				<view class="classify" v-if='kindShop.length'>
					<view class="classify_one" v-for="(item,index) in kindShop" :key='item.id'>
						<view class="classify_tit dFlex jBetween_aCenter">
							<text>{{item.name}}</text>
							<view class="more dFlex jEnd_aCenter" @click="lookMore(item.id)">
								<text>查看更多</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="classify_shop" v-if='item.nexttypes.length'>
							<view class="shopInfo" v-for="(item2,index2) in item.nexttypes" @click="lookMore(item2.id)" :key='item2.id'>
								<view class="shopImg imgPublic dFlex jCenter_aCenter">
									<image :src="item2.image" mode="widthFix"></image>
								</view>
								<view class="shopName">{{item2.name}}</view>
							</view>
						</view>
						<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
					</view>
				</view>
				<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsType
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				listHeight:'',
				kindList:[],
				actKind:{},
				
				keyword:'',
				kindShop:[],
			};
		},
		onShow(){
			// 商品分类
			this.initKind();
			// let search = uni.createSelectorQuery().select('.search');
			// search.boundingClientRect((data)=>{
			// 	uni.getSystemInfo({
			// 		success:(e)=>{
			// 			this.listHeight = e.windowHeight - e.statusBarHeight - data.height;
			// 		},
			// 		fail:(err)=>{
			// 			uni.showToast({
			// 				title:'配置信息获取失败',
			// 				icon:"none"
			// 			})
			// 		}
			// 	})
			// }).exec();
		},
		onShareAppMessage() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 商品分类
			async initKind(){
				let res = await getGoodsType({
					tid:'',
					type:'GoodsType',
				})
				if(res){
					this.kindList = res;
					this.actKind = res[0];
					this.kindShop = res[0].nexttypes;
				}
			},
			// 查看二级分类商品
			lookMore(id){
				uni.navigateTo({
					url:'/index/shopList?id='+id,
				})
			},
			// 切换一级分类
			changeScreen(line){
				this.actKind = line;
				this.kindShop = line.nexttypes;
			}
		}
	}
</script>

<style lang="scss">
	page{
		height:100%;
		background:white;
	}
	.kind{
		width:100%;
		height: 100%;
		overflow: hidden;
		.kindList{
			width:100%;
			height: 100%;
			.list{
				width:75.5%;
				padding:12px;
				height: 100%;
				overflow: auto;
				box-sizing: border-box;
				.classify{
					width: 100%;
					.classify_one{
						width: 100%;
						padding:16px 0 10px;
						border-bottom: 1px solid #E6E6E6;
						.classify_shop{
							width: 100%;
							margin-top: 8px;
							.shopInfo{
								width: calc(100% / 3);
								display: inline-block;
								text-align: center;
								font-size: 12px;
								margin-bottom: 10px;
								.shopImg{
									width: 65px;
									height: 65px;
									overflow: hidden;
									border-radius: 5px;
									margin:0 auto 5px;
									image{
										border-radius: 4px;
									}
								}
							}
						}
						.classify_tit{
							width: 100%;
							>text{
								font-size: 13px;
								font-weight: bold;
							}
							.more{
								font-size: 11px;
								color:#808080;
							}
						}
					}
				}
			}
			.screen{
				width:24.5%;
				background:#F2F2F2;
				height: 100%;
				overflow: auto;
				.kindOne{
					width:100%;
					text-align: center;
					font-size:13px;
					padding:30rpx 0;
					position: relative;
				}
				.active{
					background: white;
				}
				.active:before{
					content:'';
					width:2px;
					height:14px;
					background: #F2F2F2 linear-gradient(to bottom, #3E8EF0 0%, #1362C9 100%);
					position: absolute;
					left:0;
					top:50%;
					transform: translateY(-50%);
				}
			}
		}
		.search{
			width: 70%;
			margin:3px 0 25px;
			padding:0 12px;
			box-sizing: border-box;
		}
	}
</style>
